<template>
    <view>
        <u-collapse ref="collapse">
            <u-collapse-item :title="item.linename" name="Docs guide" v-for="(item, index) in list" :key="index">
                <view class="box">
                    <view class="item">
                        <view>路线模式:</view>
                        <view>{{ item.state == 1 ? '单次模式' : '装卸货模式' }}</view>
                    </view>
                    <view class="item" v-if="item.state == 2">
                        <view>装货设备:</view>
                        <view>{{ item.loading_facility_detail.facility_name }}</view>
                    </view>
                    <view class="item" v-if="item.state == 2">
                        <view>卸货设备:</view>
                        <view>{{ item.unload_facility_detail.facility_name }}</view>
                    </view>
                    <view class="item" v-if="item.state == 1">
                        <view>设备名称:</view>
                        <view>{{ item.one_facility_detail.facility_name }}</view>
                    </view>
                    <view class="item">
                        <view>路线模式:</view>
                        <view>{{ item.state == 1 ? '单次模式' : '装卸货模式' }}</view>
                    </view>
                    <view class="item">
                        <view>线路编号:</view>
                        <view>{{ item.linenumber }}</view>
                    </view>
                    <view class="item">
                        <view>运费:</view>
                        <view>{{ item.money }}</view>
                    </view>
                    <view class="item">
                        <view>里程:</view>
                        <view>{{ item.length }}</view>
                    </view>
                    <view class="item">
                        <view>备注:</view>
                        <view>{{ item.content }}</view>
                    </view>
                </view>
                <view class="btn">
                    <view @click="edit(item)">编辑</view>
                    <view @click="del(item.id)">删除</view>
                </view>
            </u-collapse-item>
        </u-collapse>
        <view class="submit" @click="toAdd">添加路线</view>
    </view>
</template>

<script>
import { shoplinelist, shoplinedelete } from "@/api/user.js"
export default {
    components: {},
    props: {},
    data() {
        return {
            page: 1,
            pageSize: 1000,
            linenumber: '',
            linename: '',
            list: []
        };
    },
    watch: {},
    methods: {
        getList() {
            shoplinelist({
                page: this.page,
                pageSize: this.pageSize,
                linenumber: this.linenumber,
                linename: this.linename
            }).then(res => {
                console.log(res)
                this.list = res.data;
                this.$nextTick(() => {
                    this.$refs.collapse.init()
                })
            })
        },
        toAdd() {
            uni.navigateTo({ url: '/pages/manufacturer/addLine' })
        },
        del(id) {
            let _this = this;
            uni.showModal({
                title: '提示',
                content: '确认删除吗',
                showCancel: true,
                success: ({ confirm, cancel }) => {
                    if (confirm) {
                        shoplinedelete({
                            lineIds: id
                        }).then(res => {
                            console.log(res)
                            _this.getList()
                        })
                    }
                }
            })
        },
        edit(item) {
            uni.navigateTo({
                url: '/pages/manufacturer/addLine?type=edit&lineId=' + item.id + '&lineName=' + item.linename + '&lineNumber=' + item.linenumber + '&money=' + item.money + '&length=' + item.length + '&content=' + item.content + '&status=' + item.status + '&state=' + item.state + '&loading_facility=' + item.loading_facility + '&unload_facility=' + item.unload_facility + '&one_facility=' + item.one_facility + '&loading_facility_name=' + item.loading_facility_detail.facility_name + '&unload_facility_name=' + item.unload_facility_detail.facility_name + '&one_facility_name=' + item.one_facility_detail.facility_name,
            })
        }
    },
    onShow() {
        this.getList()
    },
    onLoad(option) {
        console.log(option)
    },
};
</script>
<style scoped lang='scss'>
.submit {
    width: 94%;
    height: 90rpx;
    background-color: $uni-color-primary;
    border-radius: 50rpx;
    margin: auto;
    position: fixed;
    bottom: 120rpx;
    left: 3%;
    // margin-top: 130rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
}

.box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .item {
        width: 100%;
        margin-top: 12rpx;
        // padding-left: 30rpx;
        // padding-right: 30rpx;
        display: flex;
        height: 60rpx;
        line-height: 60rpx;

        view:nth-child(1) {
            width: 50%;
            font-size: 30rpx;
        }

        view:nth-child(2) {
            width: 50%;
            text-align: right;
        }
    }
}

.btn {
    display: flex;
    height: 60rpx;
    line-height: 60rpx;

    view {
        width: 50%;
        text-align: center;
    }

    view:nth-child(1) {
        color: $uni-color-primary;
    }

    view:nth-child(2) {
        color: red;
    }
}
</style>